<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>


<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jQuery Form Plugin</title>
<link rel="stylesheet" type="text/css" media="screen" href="jQuery%20Form%20Plugin_files/jq.css">
<link rel="stylesheet" type="text/css" media="screen" href="jQuery%20Form%20Plugin_files/form.css">
<script type="text/javascript" src="jQuery%20Form%20Plugin_files/jquery-1.js"></script>
<script type="text/javascript" src="jQuery%20Form%20Plugin_files/jquery_003.js"></script>
<script type="text/javascript" src="jQuery%20Form%20Plugin_files/jquery_002.js"></script>
<script type="text/javascript" src="jQuery%20Form%20Plugin_files/jquery.js"></script>
<script type="text/javascript" src="jQuery%20Form%20Plugin_files/chili-1.js"></script>
<script type="text/javascript"><!--
$().ajaxError(function(ev,xhr,o,err) {
    alert(err);
    if (window.console && window.console.log) console.log(err);
});
$(function() {
    // initialize the tabs
    var tab = location.hash == '#options-object' ? 2 : 1;
    var main = $('#main').tabs(tab);
    $('#samples').tabs( { selectedClass: 'sample-tab-selected', bookmarkable: false });

    var options1 = {
        target:        '#output1',   // target element to update
        beforeSubmit:  showRequest,  // pre-submit callback
        success:       showResponse  // post-submit callback
    };

    // bind form1 using 'ajaxForm'
    $('#myForm1').ajaxForm(options1);

    var options2 = {
        target:        '#output2',   // target element to update
        beforeSubmit:  showRequest,  // pre-submit callback
        success:       showResponse  // post-submit callback
    };

    // bind form2 using ajaxSubmit
    $('#myForm2').submit(function() {
        // submit the form via ajax
        $(this).ajaxSubmit(options2);
        return false;
    });

    $('#test').submit(function() {
        return false;
    });

    $('#inputForm').submit(function() {
        var query = $('#query').val();
        showIt(query);
        return false;
    });

    $('<div id="busy">Loading...</div>')
        .ajaxStart(function() {$(this).show();})
        .ajaxStop(function() {$(this).hide();})
        .appendTo('#main');

    $('#jsonForm').ajaxForm({
        dataType: 'json',
        success:  processJson
    });

    $('#validateForm1').ajaxForm({ beforeSubmit: validate1 });
    $('#validateForm2').ajaxForm({ beforeSubmit: validate2 });
    $('#validateForm3').ajaxForm({ beforeSubmit: validate3 });

    $('#xmlForm').ajaxForm({
        // dataType identifies the expected content type of the server response
        dataType:  'xml',

        // success identifies the function to invoke when the server response
        // has been received
        success:   processXml
    });

    $('#htmlForm').ajaxForm({
        // target identifies the element(s) to update with the server response
        target: '#htmlExampleTarget',
        success: function() {
            $('#htmlExampleTarget').fadeIn('slow');
        }
    });

    $('#uploadForm').ajaxForm({
        beforeSubmit: function(a,f,o) {
            o.dataType = $('#uploadResponseType')[0].value;
            $('#uploadOutput').html('Submitting...');
        },
        success: function(data) {
            var $out = $('#uploadOutput');
            $out.html('Form success handler received: <strong>' + typeof data + '</strong>');
            if (typeof data == 'object' && data.nodeType)
                data = elementToString(data.documentElement, true);
            else if (typeof data == 'object')
                data = objToString(data);
            $out.append('<div><pre>'+ data +'</pre></div>');
        }
    });
});


// pre-submit callback
function showRequest(formData, jqForm) {
    alert('About to submit: \n\n' + $.param(formData));
    return true;
}

// post-submit callback
function showResponse(responseText, statusText)  {
    alert('this: ' + this.tagName +
        '\nstatus: ' + statusText +
        '\n\nresponseText: \n' +
        responseText + '\n\nThe output div should have already been updated with the responseText.');
}

function showIt(query) {
    var successful = $('#successful')[0].checked;
    var val = $(query, '#test').fieldValue(successful);
    var ser = $(query, '#test').fieldSerialize(successful);
    alert('$("'+query+'").fieldValue(): ' + val + '\n\n$("'+query+'").fieldSerialize(): ' + ser);
}

function validate1(formData, jqForm, options) {
    for (var i=0; i < formData.length; i++) {
        if (!formData[i].value) {
            alert('Please enter a value for both Username and Password');
            return false;
        }
    }
    alert('Both fields contain values.');
}

function validate2(formData, jqForm, options) {
    var form = jqForm[0];
    if (!form.username.value || !form.password.value) {
        alert('Please enter a value for both Username and Password');
        return false;
    }
    alert('Both fields contain values.');
}

function validate3(formData, jqForm, options) {
    var usernameValue = $('#validateForm3 input[@name=username]').fieldValue();
    var passwordValue = $('#validateForm3 input[@name=password]').fieldValue();

    if (!usernameValue[0] || !passwordValue[0]) {
        alert('Please enter a value for both Username and Password');
        return false;
    }
    alert('Both fields contain values.');
}

function processJson(data) {
    alert(data.message);
}

function processXml(responseXML) {
    var message = $('message', responseXML).text();
    alert(message);
}

// helper
function objToString(o) {
    var s = '{\n';
    for (var p in o)
        s += '    ' + p + ': ' + o[p] + '\n';
    return s + '}';
}

// helper
function elementToString(n, useRefs) {
    var attr = "", nest = "", a = n.attributes;
    for (var i=0; a && i < a.length; i++)
        attr += ' ' + a[i].nodeName + '="' + a[i].nodeValue + '"';

    if (n.hasChildNodes == false)
        return "<" + n.nodeName + "\/>";

    for (var i=0; i < n.childNodes.length; i++) {
        var c = n.childNodes.item(i);
        if (c.nodeType == 1)       nest += elementToString(c);
        else if (c.nodeType == 2)  attr += " " + c.nodeName + "=\"" + c.nodeValue + "\" ";
        else if (c.nodeType == 3)  nest += c.nodeValue;
    }
    var s = "<" + n.nodeName + attr + ">" + nest + "<\/" + n.nodeName + ">";
    return useRefs ? s.replace(/</g,'&lt;').replace(/>/g,'&gt;') : s;
};

// -->
</script>
</head><body><div><a id="logo" href="http://jquery.com/" title="Powered By jQuery"></a></div>
<h1 id="banner"><a id="backnav" href="http://malsup.com/jquery/">‹‹ home</a>jQuery Form Plugin</h1>
<div id="main">
    <ul id="nav" class="anchors">
    <li class=""><a href="#getting-started">Getting Started</a></li>
    <li class="tabs-selected"><a href="#api">API</a></li>
    <li class=""><a href="#code-samples">Code Samples</a></li>
    <li class=""><a href="#fields">Working With Fields</a></li>
    <li class=""><a href="#faq">FAQ</a></li>
    <li class=""><a href="#download">Download &amp; Support</a></li>
    </ul>
    <div id="getting-started" class="tabContent tabs-hide">
        <h1>Overview</h1>
        The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use
        <abbr title="Asynchronous JavaScript and XML">AJAX</abbr>.
        The main methods,
        <code class="inline">ajaxForm</code> and <code class="inline">ajaxSubmit</code>,
        gather information from the form element to determine how to manage the submit process.  Both of these methods support
        numerous options which allows you to have full control over how the data is submitted.  Submitting a form
        with AJAX doesn't get any easier than this!

        <h1>Quick Start Guide</h1>
        <div class="step-one">Add a form to your page. Just a normal form, no special markup required:</div>
        <pre><code class="mix"><span class="tag">&lt;form</span><span class="aname">&nbsp;id</span>=<span class="string">"myForm"</span><span class="aname">&nbsp;action</span>=<span class="string">"comment.php"</span><span class="aname">&nbsp;method</span>=<span class="string">"post"</span><span class="tag">&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;Name:&nbsp;<span class="tag">&lt;input</span><span class="aname">&nbsp;type</span>=<span class="string">"text"</span><span class="aname">&nbsp;name</span>=<span class="string">"name"</span>&nbsp;<span class="tag">/&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;Comment:&nbsp;<span class="tag">&lt;textarea</span><span class="aname">&nbsp;name</span>=<span class="string">"comment"</span><span class="tag">&gt;</span><span class="tag">&lt;/textarea&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;input</span><span class="aname">&nbsp;type</span>=<span class="string">"submit"</span><span class="aname">&nbsp;value</span>=<span class="string">"Submit&nbsp;Comment"</span>&nbsp;<span class="tag">/&gt;</span>&nbsp;<br><span class="tag">&lt;/form&gt;</span></code></pre>

        <div class="step-two">Include the jQuery and Form Plugin external script files and a short script to
        initialize the form when the <abbr title="Document Object Model">DOM</abbr> is ready:</div>
        <pre><code class="mix"><span class="tag">&lt;head</span><span class="tag">&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;script</span><span class="aname">&nbsp;type</span>=<span class="string">"text/javascript"</span><span class="aname">&nbsp;src</span>=<span class="string">"path/to/jquery.js"</span><span class="tag">&gt;</span><span class="tag">&lt;/script&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;script</span><span class="aname">&nbsp;type</span>=<span class="string">"text/javascript"</span><span class="aname">&nbsp;src</span>=<span class="string">"path/to/form.js"</span><span class="tag">&gt;</span><span class="tag">&lt;/script&gt;</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;script</span><span class="aname">&nbsp;type</span>=<span class="string">"text/javascript"</span><span class="tag">&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;wait&nbsp;for&nbsp;the&nbsp;DOM&nbsp;to&nbsp;be&nbsp;loaded</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="jquery">$</span>(<span class="global">document</span>).ready(<span class="keywords">function</span>()&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;bind&nbsp;'myForm'&nbsp;and&nbsp;provide&nbsp;a&nbsp;simple&nbsp;callback&nbsp;function</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="jquery">$</span>(<span class="string">'#myForm'</span>).<span class="plugin">ajaxForm</span>(<span class="keywords">function</span>()&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class="string">"Thank&nbsp;you&nbsp;for&nbsp;your&nbsp;comment!"</span>);&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/script&gt;</span>&nbsp;<br><span class="tag">&lt;/head&gt;</span></code></pre>

    <strong>That's it!</strong>  When this form is submitted the <em>name</em> and <em>comment</em> fields
    will be posted to <em>comment.php</em>.  If the server returns
    a success status then the user will see a "Thank you" message.
    <p>
    </p></div>

    <div id="api" class="tabContent">
        <h1>Form Plugin API</h1>
        The Form Plugin API provides several methods that allow you to easily manage form data and form submission.
        <dl>
        <dt><code class="method">ajaxForm</code></dt>
        <dd>Prepares a form to be submitted via <abbr title="Asynchronous JavaScript and XML">AJAX</abbr>
        by adding all of the necessary event listeners.  It does <strong>not</strong> submit the form.
        Use <code class="inline">ajaxForm</code> in your document's <code class="inline">ready</code> function to
        prepare your form(s) for AJAX submission.  <code class="inline">ajaxForm</code> takes zero or one argument.  The single argument
        can be either a callback function or an <a href="#options-object">Options Object</a>.<br>
        Chainable: Yes.
        <p>Example:
        </p><pre><code class="mix"><span class="jquery">$</span>(<span class="string">'#myFormId'</span>).<span class="plugin">ajaxForm</span>();</code></pre>
        </dd>
        <dt><code class="method">ajaxSubmit</code></dt>
        <dd>Immediately submits the form via AJAX.  In the most common use case this is invoked in response to the user submitting the form.
        <code class="inline">ajaxSubmit</code> takes zero or one argument.  The single argument
        can be either a callback function or an <a href="#options-object">Options Object</a>.<br>
        Chainable: Yes.
        <p>Example:
        </p><pre><code class="mix"><span class="com">//&nbsp;attach&nbsp;handler&nbsp;to&nbsp;form's&nbsp;submit&nbsp;event</span>&nbsp;<br><span class="jquery">$</span>(<span class="string">'#myFormId'</span>).submit(<span class="keywords">function</span>()&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;submit&nbsp;the&nbsp;form</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="jquery">$</span>(<span class="keywords">this</span>).<span class="plugin">ajaxSubmit</span>();&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;return&nbsp;false&nbsp;to&nbsp;prevent&nbsp;normal&nbsp;browser&nbsp;submit&nbsp;and&nbsp;page&nbsp;navigation</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">return</span>&nbsp;<span class="keywords">false</span>;&nbsp;<br>});</code></pre>
        </dd>
        <dt><code class="method">formSerialize</code></dt>
        <dd>Serializes the form into a query string.  This method will return a string in the format:
        <code class="inline">name1=value1&amp;name2=value2</code><br>
        Chainable: No, this method returns a String.
        <p>Example:
        </p><pre><code class="mix"><span class="keywords">var</span><span class="aname">&nbsp;queryString</span>&nbsp;=&nbsp;<span class="jquery">$</span>(<span class="string">'#myFormId'</span>).<span class="plugin">formSerialize</span>();&nbsp;<br>&nbsp;<br><span class="com">//&nbsp;the&nbsp;data&nbsp;could&nbsp;now&nbsp;be&nbsp;submitted&nbsp;using&nbsp;$.get,&nbsp;$.post,&nbsp;$.ajax,&nbsp;etc</span>&nbsp;<br><span class="jquery">$</span>.post(<span class="string">'myscript.php'</span>,&nbsp;queryString);&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></pre>
        </dd>
        <dt><code class="method">fieldSerialize</code></dt>
        <dd>Serializes field elements into a query string.  This is handy when you need to serialize only
        part of a form. This method will return a string in the format:
        <code class="inline">name1=value1&amp;name2=value2</code><br>
        Chainable: No, this method returns a String.
        <p>Example:
        </p><pre><code class="mix"><span class="keywords">var</span><span class="aname">&nbsp;queryString</span>&nbsp;=&nbsp;<span class="jquery">$</span>(<span class="string">'#myFormId&nbsp;.specialFields'</span>).<span class="plugin">fieldSerialize</span>();</code></pre>
        </dd>
        <dt><code class="method">fieldValue</code></dt>
        <dd>Returns the value(s) of the element(s) in the matched set in an array.  As of version .91, 
        this method <strong>always</strong> returns an array.
        If no valid value can be determined the
        array will be empty, otherwise it will contain one or more values.<br>
        Chainable: No, this method returns an array.
        <p>Example:
        </p><pre><code class="mix"><span class="com">//&nbsp;get&nbsp;the&nbsp;value&nbsp;of&nbsp;the&nbsp;password&nbsp;input</span>&nbsp;<br><span class="keywords">var</span><span class="aname">&nbsp;value</span>&nbsp;=&nbsp;<span class="jquery">$</span>(<span class="string">'#myFormId&nbsp;:password'</span>).<span class="plugin">fieldValue</span>();&nbsp;<br>alert(<span class="string">'The&nbsp;password&nbsp;is:&nbsp;'</span>&nbsp;+&nbsp;value[<span class="numbers">0</span>]);&nbsp;<br></code></pre>
        </dd>
        <dt><code class="method">resetForm</code></dt>
        <dd>Resets the form to its original state by invoking the form element's native
        <abbr title="Document Object Model">DOM</abbr> method.<br>
        Chainable: Yes.
        <p>Example:
        </p><pre><code class="mix"><span class="jquery">$</span>(<span class="string">'#myFormId'</span>).<span class="plugin">resetForm</span>();</code></pre>
        </dd>
        <dt><code class="method">clearForm</code></dt>
        <dd>Clears the form elements.  This method emptys all of the text inputs, password inputs and textarea elements, clears
        the selection in any select elements, and unchecks all radio and checkbox inputs.<br>
        Chainable: Yes.
        <pre><code class="mix"><span class="jquery">$</span>(<span class="string">'#myFormId'</span>).<span class="plugin">clearForm</span>();</code></pre>
        </dd>
        <dt><code class="method">clearFields</code></dt>
        <dd>Clears field elements.  This is handy when you need to clear only a part of the form.<br>
        Chainable: Yes.
        <pre><code class="mix"><span class="jquery">$</span>(<span class="string">'#myFormId&nbsp;.specialFields'</span>).<span class="plugin">clearFields</span>();</code></pre>
        </dd>
        </dl>
        <a id="options-object" name="options-object"></a>
        <h1>The Options Object</h1>
        Both <code class="inline">ajaxForm</code> and <code class="inline">ajaxSubmit</code> support
        numerous options which can be provided using an Options Object.  The Options Object is simply
        a JavaScript Object that contains properties with values set as follows:
        <dl class="options">
        <dt>target</dt>
        <dd>Identifies the element(s) in the page to be updated with the server response.
            This value may be specified as a jQuery selection string, a jQuery object,
            or a DOM element.<br>
            Default value: <code class="inline">null</code>
        </dd>
        <dt>url</dt>
        <dd>URL to which the form data will be submitted.<br>
        Default value: value of form's <code class="inline">action</code> attribute
        </dd>
        <dt>type</dt>
        <dd>The method in which the form data should be submitted, 'GET' or 'POST'.<br>
            Default value: value of form's <code class="inline">method</code> attribute (or 'GET' if none found)
        </dd>
        <dt>beforeSubmit</dt>
        <dd>Callback function to be invoked before the form is submitted.
          The 'beforeSubmit' callback can be provided as a hook for running pre-submit logic or for
          validating the form data.  If the 'beforeSubmit' callback returns false then the form will
          not be submitted. The 'beforeSubmit' callback is invoked with three arguments: the form data
          in array format, the jQuery object for the form, and the Options Object passed into ajaxForm/ajaxSubmit.
          The array of form data takes the following form:
         <pre><code class="mix">[&nbsp;{&nbsp;name:&nbsp;<span class="string">'username'</span>,&nbsp;value:&nbsp;<span class="string">'jresig'</span>&nbsp;},&nbsp;{&nbsp;name:&nbsp;<span class="string">'password'</span>,&nbsp;value:&nbsp;<span class="string">'secret'</span>&nbsp;}&nbsp;]</code></pre>
            Default value: <code class="inline">null</code>
        </dd>
        <dt>success</dt>
        <dd>Callback function to be invoked after the form has been submitted.
            If a 'success' callback function is provided it is invoked after the response has been returned
            from the server.  It is passed the responseText or responseXML value (depending on the value of
            the dataType option).
            <p>
            Default value: <code class="inline">null</code>
        
        </p></dd><dt>dataType</dt>
        <dd>Expected data type of the response.  One of: null, 'xml', 'script', or 'json'.
        The <code class="inline">dataType</code> option provides a means for specifying how the server response should be handled.
        This maps directly to the <code class="inline">jQuery.httpData</code> method.
        The following values are supported:
        <p>
        <strong>'xml'</strong>: if dataType == 'xml' the server response is treated as XML and the 'success'
                  callback method, if specified, will be passed the responseXML value
        </p><p>
        <strong>'json'</strong>: if dataType == 'json' the server response will be evaluted and passed to
                  the 'success' callback, if specified
        </p><p>
        <strong>'script'</strong>: if dataType == 'script' the server response is evaluated in the global context
        </p><p>
            Default value: <code class="inline">null</code>
        
        </p></dd><dt>semantic</dt>
        <dd>Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the
            normal form serialization is done in semantic order with the exception of input elements of <code class="inline">type="image"</code>.
            You should only set the semantic option to true if your server has strict semantic requirements
            <strong>and</strong> your form contains an input element of <code class="inline">type="image"</code>.<br>
            Default value: <code class="inline">false</code>
        </dd>
        <dt>resetForm</dt>
        <dd>Boolean flag indicating whether the form should be reset if the submit is successful<br>
            Default value: <code class="inline">null</code>
        </dd>
        <dt>clearForm</dt>
        <dd>Boolean flag indicating whether the form should be cleared if the submit is successful<br>
            Default value: <code class="inline">null</code>
        </dd>
        <dt>iframe</dt>
        <dd>Boolean flag indicating whether the form should always target the server response to an iframe.
            This is useful in conjuction with file uploads.  See the <em>File Uploads</em> 
            documentation on the <a href="#code-samples">Code Samples</a>  page for more info.
        <br>
            Default value: <code class="inline">false</code>
        </dd>
        </dl>
        <p>Example:
        </p><pre><code class="mix"><span class="com">//&nbsp;prepare&nbsp;Options&nbsp;Object</span>&nbsp;<br><span class="keywords">var</span><span class="aname">&nbsp;options</span>&nbsp;=&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;target:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">'#divToUpdate'</span>,&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">'comment.php'</span>,&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">function</span>()&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class="string">'Thanks&nbsp;for&nbsp;your&nbsp;comment!'</span>);&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<br>};&nbsp;<br>&nbsp;<br><span class="com">//&nbsp;pass&nbsp;options&nbsp;to&nbsp;ajaxForm</span>&nbsp;<br><span class="jquery">$</span>(<span class="string">'#myForm'</span>).<span class="plugin">ajaxForm</span>(options);&nbsp;<br></code></pre>

    Note that the Options Object can also be used to pass values to jQuery's
    <a class="external" href="http://docs.jquery.com/Ajax"><code class="inline">$.ajax</code></a> method.
    If you are familiar with the options supported by <code class="inline">$.ajax</code>
    you may use them in the Options Object passed to <code class="inline">ajaxForm</code> and
    <code class="inline">ajaxSubmit</code>.

    </div>

    <div id="code-samples" class="tabContent tabs-hide">
        <h1>Code Samples</h1>

        <div id="samples">
            <ul class="sampleAnchors">
                <li class="sample-tab-selected"><a href="#sample1">ajaxForm</a></li>
                <li><a href="#sample2">ajaxSubmit</a></li>
                <li><a href="#sample3">Validation</a></li>
                <li><a href="#sample4">JSON</a></li>
                <li><a href="#sample5">XML</a></li>
                <li><a href="#sample6">HTML</a></li>
                <li><a href="#sample7">File Uploads</a></li>
            </ul>
            <div id="sample1" class="sampleTabContent">
            <p>
            The following code controls the HTML form beneath it. It uses <code class="inline">ajaxForm</code>
                to bind the form and demonstrates how to use pre- and post-submit callbacks.
                </p><pre><code class="mix"><span class="com">//&nbsp;prepare&nbsp;the&nbsp;form&nbsp;when&nbsp;the&nbsp;DOM&nbsp;is&nbsp;ready</span>&nbsp;<br><span class="jquery">$</span>(<span class="global">document</span>).ready(<span class="keywords">function</span>()&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">var</span><span class="aname">&nbsp;options</span>&nbsp;=&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">'#output1'</span>,&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;target&nbsp;element(s)&nbsp;to&nbsp;be&nbsp;updated&nbsp;with&nbsp;server&nbsp;response</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeSubmit:&nbsp;&nbsp;showRequest,&nbsp;&nbsp;<span class="com">//&nbsp;pre-submit&nbsp;callback</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showResponse&nbsp;&nbsp;<span class="com">//&nbsp;post-submit&nbsp;callback</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;other&nbsp;available&nbsp;options:</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//url:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;override&nbsp;for&nbsp;form's&nbsp;'action'&nbsp;attribute</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//type:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;'get'&nbsp;or&nbsp;'post',&nbsp;override&nbsp;for&nbsp;form's&nbsp;'method'&nbsp;attribute</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//dataType:&nbsp;&nbsp;null&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;'xml',&nbsp;'script',&nbsp;or&nbsp;'json'&nbsp;(expected&nbsp;server&nbsp;response&nbsp;type)</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//clearForm:&nbsp;true&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;clear&nbsp;all&nbsp;form&nbsp;fields&nbsp;after&nbsp;successful&nbsp;submit</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//resetForm:&nbsp;true&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;reset&nbsp;the&nbsp;form&nbsp;after&nbsp;successful&nbsp;submit</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;$.ajax&nbsp;options&nbsp;can&nbsp;be&nbsp;used&nbsp;here&nbsp;too,&nbsp;for&nbsp;example:</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//timeout:&nbsp;&nbsp;&nbsp;3000</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;bind&nbsp;form&nbsp;using&nbsp;'ajaxForm'</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="jquery">$</span>(<span class="string">'#myForm1'</span>).<span class="plugin">ajaxForm</span>(options);&nbsp;<br>});&nbsp;<br>&nbsp;<br><span class="com">//&nbsp;pre-submit&nbsp;callback</span>&nbsp;<br><span class="keywords">function</span>&nbsp;showRequest(formData,&nbsp;jqForm,&nbsp;options)&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;formData&nbsp;is&nbsp;an&nbsp;array;&nbsp;here&nbsp;we&nbsp;use&nbsp;$.param&nbsp;to&nbsp;convert&nbsp;it&nbsp;to&nbsp;a&nbsp;string&nbsp;to&nbsp;display&nbsp;it</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;but&nbsp;the&nbsp;form&nbsp;plugin&nbsp;does&nbsp;this&nbsp;for&nbsp;you&nbsp;automatically&nbsp;when&nbsp;it&nbsp;submits&nbsp;the&nbsp;data</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">var</span><span class="aname">&nbsp;queryString</span>&nbsp;=&nbsp;<span class="jquery">$</span>.param(formData);&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;jqForm&nbsp;is&nbsp;a&nbsp;jQuery&nbsp;object&nbsp;encapsulating&nbsp;the&nbsp;form&nbsp;element.&nbsp;&nbsp;To&nbsp;access&nbsp;the</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;DOM&nbsp;element&nbsp;for&nbsp;the&nbsp;form&nbsp;do&nbsp;this:</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;var&nbsp;formElement&nbsp;=&nbsp;jqForm[0];</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class="string">'About&nbsp;to&nbsp;submit:&nbsp;\n\n'</span>&nbsp;+&nbsp;queryString);&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;here&nbsp;we&nbsp;could&nbsp;return&nbsp;false&nbsp;to&nbsp;prevent&nbsp;the&nbsp;form&nbsp;from&nbsp;being&nbsp;submitted;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;returning&nbsp;anything&nbsp;other&nbsp;than&nbsp;false&nbsp;will&nbsp;allow&nbsp;the&nbsp;form&nbsp;submit&nbsp;to&nbsp;continue</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">return</span>&nbsp;<span class="keywords">true</span>;&nbsp;<br>}&nbsp;<br>&nbsp;<br><span class="com">//&nbsp;post-submit&nbsp;callback</span>&nbsp;<br><span class="keywords">function</span>&nbsp;showResponse(responseText,&nbsp;statusText)&nbsp;&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;for&nbsp;normal&nbsp;html&nbsp;responses,&nbsp;the&nbsp;first&nbsp;argument&nbsp;to&nbsp;the&nbsp;success&nbsp;callback</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;is&nbsp;the&nbsp;XMLHttpRequest&nbsp;object's&nbsp;responseText&nbsp;property</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;if&nbsp;the&nbsp;ajaxForm&nbsp;method&nbsp;was&nbsp;passed&nbsp;an&nbsp;Options&nbsp;Object&nbsp;with&nbsp;the&nbsp;dataType</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;property&nbsp;set&nbsp;to&nbsp;'xml'&nbsp;then&nbsp;the&nbsp;first&nbsp;argument&nbsp;to&nbsp;the&nbsp;success&nbsp;callback</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;is&nbsp;the&nbsp;XMLHttpRequest&nbsp;object's&nbsp;responseXML&nbsp;property</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;if&nbsp;the&nbsp;ajaxForm&nbsp;method&nbsp;was&nbsp;passed&nbsp;an&nbsp;Options&nbsp;Object&nbsp;with&nbsp;the&nbsp;dataType</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;property&nbsp;set&nbsp;to&nbsp;'json'&nbsp;then&nbsp;the&nbsp;first&nbsp;argument&nbsp;to&nbsp;the&nbsp;success&nbsp;callback</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;is&nbsp;the&nbsp;json&nbsp;data&nbsp;object&nbsp;returned&nbsp;by&nbsp;the&nbsp;server</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class="string">'status:&nbsp;'</span>&nbsp;+&nbsp;statusText&nbsp;+&nbsp;<span class="string">'\n\nresponseText:&nbsp;\n'</span>&nbsp;+&nbsp;responseText&nbsp;+&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">'\n\nThe&nbsp;output&nbsp;div&nbsp;should&nbsp;have&nbsp;already&nbsp;been&nbsp;updated&nbsp;with&nbsp;the&nbsp;responseText.'</span>);&nbsp;<br>}&nbsp;<br></code></pre>
                <form id="myForm1" action="dummy.php" method="post"><div>
                        <input name="Hidden" value="hiddenValue" type="hidden">
                        <table>
                        <tbody><tr><td>Name:</td><td><input name="Name" value="MyName1" type="text"></td></tr>
                        <tr><td>Password:</td><td><input name="Password" type="password"></td></tr>
                        <tr><td>Multiple:</td><td><select name="Multiple" multiple="multiple">

                            <optgroup label="Group 1">
                                <option value="one" selected="selected">One</option>
                                <option value="two">Two</option>
                                <option value="three">Three</option>
                            </optgroup>
                            <optgroup label="Group 2">
                                <option value="four">Four</option>

                                <option value="five">Five</option>
                                <option value="six">Six</option>
                            </optgroup>
                        </select></td></tr>
                        <tr><td>Single:</td><td><select name="Single">
                            <option value="one" selected="selected">One</option>
                            <option value="two">Two</option>

                            <option value="three">Three</option>
                        </select></td></tr>
                        <tr><td>Single2:</td><td><select name="Single2">
                            <optgroup label="Group 1">
                                <option value="A" selected="selected">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </optgroup>
                            <optgroup label="Group 2">
                                <option value="D">D</option>
                                <option value="E">E</option>
                                <option value="F">F</option>
                            </optgroup>
                        </select></td></tr>

                        <tr><td>Check:</td><td>
                            <input name="Check" value="1" type="checkbox">
                            <input name="Check" value="2" type="checkbox">
                            <input name="Check" value="3" type="checkbox">
                        </td></tr>
                        <tr><td>Radio:</td><td>
                            <input name="Radio" value="1" type="radio">
                            <input name="Radio" value="2" type="radio">

                            <input name="Radio" value="3" type="radio">
                        </td></tr>
                        <tr><td>Text:</td><td><textarea name="Text" rows="2" cols="20">This is Form1</textarea></td></tr>
                        </tbody></table>
                        <input name="resetButton " value="Reset" type="reset">
                        <input name="submitButton" value="Submit1" type="submit">
                        <input name="submitButton" value="Submit2" src="jQuery%20Form%20Plugin_files/submit.gif" type="image">
                </div></form>
                <h1>Output Div (#output1):</h1>
                <div id="output1">lorem ipsum dolor sit amet
consectetuer adipiscing elit
sed lorem leo
lorem leo consectetuer adipiscing elit
sed lorem leo
rhoncus sit amet
elementum at
bibendum at, eros
cras at mi et tortor egestas vestibulum
sed cras at mi vestibulum
phasellus sed felis sit amet
orci dapibus semper.
</div>
            </div>


            <div id="sample2" class="sampleTabContent tabs-hide">
            <p>
            The following code controls the HTML form beneath it. It uses <code class="inline">ajaxSubmit</code>
                to submit the form.
                </p><pre><code class="mix"><span class="com">//&nbsp;prepare&nbsp;the&nbsp;form&nbsp;when&nbsp;the&nbsp;DOM&nbsp;is&nbsp;ready</span>&nbsp;<br><span class="jquery">$</span>(<span class="global">document</span>).ready(<span class="keywords">function</span>()&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">var</span><span class="aname">&nbsp;options</span>&nbsp;=&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">'#output2'</span>,&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;target&nbsp;element(s)&nbsp;to&nbsp;be&nbsp;updated&nbsp;with&nbsp;server&nbsp;response</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeSubmit:&nbsp;&nbsp;showRequest,&nbsp;&nbsp;<span class="com">//&nbsp;pre-submit&nbsp;callback</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showResponse&nbsp;&nbsp;<span class="com">//&nbsp;post-submit&nbsp;callback</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;other&nbsp;available&nbsp;options:</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//url:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;override&nbsp;for&nbsp;form's&nbsp;'action'&nbsp;attribute</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//type:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;'get'&nbsp;or&nbsp;'post',&nbsp;override&nbsp;for&nbsp;form's&nbsp;'method'&nbsp;attribute</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//dataType:&nbsp;&nbsp;null&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;'xml',&nbsp;'script',&nbsp;or&nbsp;'json'&nbsp;(expected&nbsp;server&nbsp;response&nbsp;type)</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//clearForm:&nbsp;true&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;clear&nbsp;all&nbsp;form&nbsp;fields&nbsp;after&nbsp;successful&nbsp;submit</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//resetForm:&nbsp;true&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;reset&nbsp;the&nbsp;form&nbsp;after&nbsp;successful&nbsp;submit</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;$.ajax&nbsp;options&nbsp;can&nbsp;be&nbsp;used&nbsp;here&nbsp;too,&nbsp;for&nbsp;example:</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//timeout:&nbsp;&nbsp;&nbsp;3000</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;bind&nbsp;to&nbsp;the&nbsp;form's&nbsp;submit&nbsp;event</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="jquery">$</span>(<span class="string">'#myForm2'</span>).submit(<span class="keywords">function</span>()&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;inside&nbsp;event&nbsp;callbacks&nbsp;'this'&nbsp;is&nbsp;the&nbsp;DOM&nbsp;element&nbsp;so&nbsp;we&nbsp;first</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;wrap&nbsp;it&nbsp;in&nbsp;a&nbsp;jQuery&nbsp;object&nbsp;and&nbsp;then&nbsp;invoke&nbsp;ajaxSubmit</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="jquery">$</span>(<span class="keywords">this</span>).<span class="plugin">ajaxSubmit</span>(options);&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;!!!&nbsp;Important&nbsp;!!!</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;always&nbsp;return&nbsp;false&nbsp;to&nbsp;prevent&nbsp;standard&nbsp;browser&nbsp;submit&nbsp;and&nbsp;page&nbsp;navigation</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">return</span>&nbsp;<span class="keywords">false</span>;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;<br>});&nbsp;<br>&nbsp;<br><span class="com">//&nbsp;pre-submit&nbsp;callback</span>&nbsp;<br><span class="keywords">function</span>&nbsp;showRequest(formData,&nbsp;jqForm,&nbsp;options)&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;formData&nbsp;is&nbsp;an&nbsp;array;&nbsp;here&nbsp;we&nbsp;use&nbsp;$.param&nbsp;to&nbsp;convert&nbsp;it&nbsp;to&nbsp;a&nbsp;string&nbsp;to&nbsp;display&nbsp;it</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;but&nbsp;the&nbsp;form&nbsp;plugin&nbsp;does&nbsp;this&nbsp;for&nbsp;you&nbsp;automatically&nbsp;when&nbsp;it&nbsp;submits&nbsp;the&nbsp;data</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">var</span><span class="aname">&nbsp;queryString</span>&nbsp;=&nbsp;<span class="jquery">$</span>.param(formData);&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;jqForm&nbsp;is&nbsp;a&nbsp;jQuery&nbsp;object&nbsp;encapsulating&nbsp;the&nbsp;form&nbsp;element.&nbsp;&nbsp;To&nbsp;access&nbsp;the</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;DOM&nbsp;element&nbsp;for&nbsp;the&nbsp;form&nbsp;do&nbsp;this:</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;var&nbsp;formElement&nbsp;=&nbsp;jqForm[0];</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class="string">'About&nbsp;to&nbsp;submit:&nbsp;\n\n'</span>&nbsp;+&nbsp;queryString);&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;here&nbsp;we&nbsp;could&nbsp;return&nbsp;false&nbsp;to&nbsp;prevent&nbsp;the&nbsp;form&nbsp;from&nbsp;being&nbsp;submitted;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;returning&nbsp;anything&nbsp;other&nbsp;than&nbsp;false&nbsp;will&nbsp;allow&nbsp;the&nbsp;form&nbsp;submit&nbsp;to&nbsp;continue</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">return</span>&nbsp;<span class="keywords">true</span>;&nbsp;<br>}&nbsp;<br>&nbsp;<br><span class="com">//&nbsp;post-submit&nbsp;callback</span>&nbsp;<br><span class="keywords">function</span>&nbsp;showResponse(responseText,&nbsp;statusText)&nbsp;&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;for&nbsp;normal&nbsp;html&nbsp;responses,&nbsp;the&nbsp;first&nbsp;argument&nbsp;to&nbsp;the&nbsp;success&nbsp;callback</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;is&nbsp;the&nbsp;XMLHttpRequest&nbsp;object's&nbsp;responseText&nbsp;property</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;if&nbsp;the&nbsp;ajaxSubmit&nbsp;method&nbsp;was&nbsp;passed&nbsp;an&nbsp;Options&nbsp;Object&nbsp;with&nbsp;the&nbsp;dataType</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;property&nbsp;set&nbsp;to&nbsp;'xml'&nbsp;then&nbsp;the&nbsp;first&nbsp;argument&nbsp;to&nbsp;the&nbsp;success&nbsp;callback</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;is&nbsp;the&nbsp;XMLHttpRequest&nbsp;object's&nbsp;responseXML&nbsp;property</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;if&nbsp;the&nbsp;ajaxSubmit&nbsp;method&nbsp;was&nbsp;passed&nbsp;an&nbsp;Options&nbsp;Object&nbsp;with&nbsp;the&nbsp;dataType</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;property&nbsp;set&nbsp;to&nbsp;'json'&nbsp;then&nbsp;the&nbsp;first&nbsp;argument&nbsp;to&nbsp;the&nbsp;success&nbsp;callback</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;is&nbsp;the&nbsp;json&nbsp;data&nbsp;object&nbsp;returned&nbsp;by&nbsp;the&nbsp;server</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class="string">'status:&nbsp;'</span>&nbsp;+&nbsp;statusText&nbsp;+&nbsp;<span class="string">'\n\nresponseText:&nbsp;\n'</span>&nbsp;+&nbsp;responseText&nbsp;+&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">'\n\nThe&nbsp;output&nbsp;div&nbsp;should&nbsp;have&nbsp;already&nbsp;been&nbsp;updated&nbsp;with&nbsp;the&nbsp;responseText.'</span>);&nbsp;<br>}&nbsp;<br></code></pre>
                <form id="myForm2" action="dummy2.php" method="post"><div>

                        <input name="Hidden" value="hiddenValue" type="hidden">
                        <table>
                        <tbody><tr><td>Name:</td><td><input name="Name" value="MyName2" type="text"></td></tr>
                        <tr><td>Password:</td><td><input name="Password" type="password"></td></tr>
                        <tr><td>Multiple:</td><td><select name="Multiple" multiple="multiple">
                            <optgroup label="Group 1">
                                <option value="one" selected="selected">One</option>

                                <option value="two">Two</option>
                                <option value="three">Three</option>
                            </optgroup>
                            <optgroup label="Group 2">
                                <option value="four">Four</option>
                                <option value="five">Five</option>
                                <option value="six">Six</option>

                            </optgroup>
                        </select></td></tr>
                        <tr><td>Single:</td><td><select name="Single">
                            <option value="one" selected="selected">One</option>
                            <option value="two">Two</option>
                            <option value="three">Three</option>
                        </select></td></tr>

                        <tr><td>Single2:</td><td><select name="Single2">
                            <optgroup label="Group 1">
                                <option value="A" selected="selected">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </optgroup>
                            <optgroup label="Group 2">

                                <option value="D">D</option>
                                <option value="E">E</option>
                                <option value="F">F</option>
                            </optgroup>
                        </select></td></tr>
                        <tr><td>Check:</td><td>
                            <input name="Check" value="1" type="checkbox">

                            <input name="Check" value="2" type="checkbox">
                            <input name="Check" value="3" type="checkbox">
                        </td></tr>
                        <tr><td>Radio:</td><td>
                            <input name="Radio" value="1" type="radio">
                            <input name="Radio" value="2" type="radio">
                            <input name="Radio" value="3" type="radio">
                        </td></tr>
                        <tr><td>Text:</td><td><textarea name="Text" rows="2" cols="20">This is Form2</textarea></td></tr>

                        </tbody></table>
                        <input name="resetButton " value="Reset" type="reset">
                        <input name="submitButton" value="Submit1" type="submit">
                        <input name="submitButton" value="Submit2" src="jQuery%20Form%20Plugin_files/submit.gif" type="image">
                </div></form>
                <h1>Output Div (#output2):</h1>
                <div id="output2">AJAX response will replace this content.</div>
            </div>

            <div id="sample3" class="sampleTabContent tabs-hide">
            <p>
            This page gives several examples of how form data can be validated before it is sent to
            the server.  The secret is in the <code class="inline">beforeSubmit</code> option.  If this
            pre-submit callback returns false, the submit process is aborted.
            </p><p>
            The following login form is used for each of the examples that follow.  Each example
            will validate that both the <em>username</em> and <em>password</em> fields have been filled
            in by the user.
            </p><p>
            <strong>Form Markup:</strong>
            </p><pre><code class="mix"><span class="tag">&lt;form</span><span class="aname">&nbsp;id</span>=<span class="string">"validationForm"</span><span class="aname">&nbsp;action</span>=<span class="string">"dummy.php"</span><span class="aname">&nbsp;method</span>=<span class="string">"post"</span><span class="tag">&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;Username:&nbsp;<span class="tag">&lt;input</span><span class="aname">&nbsp;type</span>=<span class="string">"text"</span><span class="aname">&nbsp;name</span>=<span class="string">"username"</span>&nbsp;<span class="tag">/&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;Password:&nbsp;<span class="tag">&lt;input</span><span class="aname">&nbsp;type</span>=<span class="string">"password"</span><span class="aname">&nbsp;name</span>=<span class="string">"password"</span>&nbsp;<span class="tag">/&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;input</span><span class="aname">&nbsp;type</span>=<span class="string">"submit"</span><span class="aname">&nbsp;value</span>=<span class="string">"Submit"</span>&nbsp;<span class="tag">/&gt;</span>&nbsp;<br><span class="tag">&lt;/form&gt;</span></code></pre>
            <p>
            First, we initialize the form and give it a <code class="inline">beforeSubmit</code>
            callback function - this is the validation function.
            </p><pre><code class="mix"><span class="com">//&nbsp;prepare&nbsp;the&nbsp;form&nbsp;when&nbsp;the&nbsp;DOM&nbsp;is&nbsp;ready</span>&nbsp;<br><span class="jquery">$</span>(<span class="global">document</span>).ready(<span class="keywords">function</span>()&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;bind&nbsp;form&nbsp;using&nbsp;ajaxForm</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="jquery">$</span>(<span class="string">'#myForm2'</span>).<span class="plugin">ajaxForm</span>(&nbsp;{&nbsp;beforeSubmit:&nbsp;validate&nbsp;}&nbsp;);&nbsp;<br>});</code></pre>

            <h3>Validate Using the <code>formData</code> Argument</h3>
            <form id="validateForm1" action="dummy.php" method="post"><div>
                Username: <input name="username" type="text">
                Password: <input name="password" type="password">
                <input value="Submit" type="submit">
            </div></form>
            <pre><code class="mix"><span class="keywords">function</span>&nbsp;validate(formData,&nbsp;jqForm,&nbsp;options)&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;formData&nbsp;is&nbsp;an&nbsp;array&nbsp;of&nbsp;objects&nbsp;representing&nbsp;the&nbsp;name&nbsp;and&nbsp;value&nbsp;of&nbsp;each&nbsp;field</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;that&nbsp;will&nbsp;be&nbsp;sent&nbsp;to&nbsp;the&nbsp;server;&nbsp;&nbsp;it&nbsp;takes&nbsp;the&nbsp;following&nbsp;form:</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;[</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;name:&nbsp;&nbsp;username,&nbsp;value:&nbsp;valueOfUsernameInput&nbsp;},</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;name:&nbsp;&nbsp;password,&nbsp;value:&nbsp;valueOfPasswordInput&nbsp;}</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;]</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;To&nbsp;validate,&nbsp;we&nbsp;can&nbsp;examine&nbsp;the&nbsp;contents&nbsp;of&nbsp;this&nbsp;array&nbsp;to&nbsp;see&nbsp;if&nbsp;the</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;username&nbsp;and&nbsp;password&nbsp;fields&nbsp;have&nbsp;values.&nbsp;&nbsp;If&nbsp;either&nbsp;value&nbsp;evaluates</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;to&nbsp;false&nbsp;then&nbsp;we&nbsp;return&nbsp;false&nbsp;from&nbsp;this&nbsp;method.</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">for</span>&nbsp;(<span class="keywords">var</span><span class="aname">&nbsp;i</span>=<span class="numbers">0</span>;&nbsp;i&nbsp;&lt;&nbsp;formData.length;&nbsp;i++)&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">if</span>&nbsp;(!formData[i].value)&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class="string">'Please&nbsp;enter&nbsp;a&nbsp;value&nbsp;for&nbsp;both&nbsp;Username&nbsp;and&nbsp;Password'</span>);&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">return</span>&nbsp;<span class="keywords">false</span>;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class="string">'Both&nbsp;fields&nbsp;contain&nbsp;values.'</span>);&nbsp;<br>}</code></pre>
            <h3>Validate Using the <code>jqForm</code> Argument</h3>
            <form id="validateForm2" action="dummy.php" method="post"><div>
                Username: <input name="username" type="text">
                Password: <input name="password" type="password">
                <input value="Submit" type="submit">
            </div></form>
            <pre><code class="mix"><span class="keywords">function</span>&nbsp;validate(formData,&nbsp;jqForm,&nbsp;options)&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;jqForm&nbsp;is&nbsp;a&nbsp;jQuery&nbsp;object&nbsp;which&nbsp;wraps&nbsp;the&nbsp;form&nbsp;DOM&nbsp;element</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;To&nbsp;validate,&nbsp;we&nbsp;can&nbsp;access&nbsp;the&nbsp;DOM&nbsp;elements&nbsp;directly&nbsp;and&nbsp;return&nbsp;true</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;only&nbsp;if&nbsp;the&nbsp;values&nbsp;of&nbsp;both&nbsp;the&nbsp;username&nbsp;and&nbsp;password&nbsp;fields&nbsp;evaluate</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;to&nbsp;true</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">var</span><span class="aname">&nbsp;form</span>&nbsp;=&nbsp;jqForm[<span class="numbers">0</span>];&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">if</span>&nbsp;(!form.username.value&nbsp;||&nbsp;!form.password.value)&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class="string">'Please&nbsp;enter&nbsp;a&nbsp;value&nbsp;for&nbsp;both&nbsp;Username&nbsp;and&nbsp;Password'</span>);&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">return</span>&nbsp;<span class="keywords">false</span>;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class="string">'Both&nbsp;fields&nbsp;contain&nbsp;values.'</span>);&nbsp;<br>}</code></pre>
            <h3>Validate Using the <code>fieldValue</code> Method</h3>
            <form id="validateForm3" action="dummy.php" method="post"><div>
                Username: <input name="username" type="text">
                Password: <input name="password" type="password">
                <input value="Submit" type="submit">
            </div></form>
            <pre><code class="mix"><span class="keywords">function</span>&nbsp;validate(formData,&nbsp;jqForm,&nbsp;options)&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;fieldValue&nbsp;is&nbsp;a&nbsp;Form&nbsp;Plugin&nbsp;method&nbsp;that&nbsp;can&nbsp;be&nbsp;invoked&nbsp;to&nbsp;find&nbsp;the</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;current&nbsp;value&nbsp;of&nbsp;a&nbsp;field</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;To&nbsp;validate,&nbsp;we&nbsp;can&nbsp;capture&nbsp;the&nbsp;values&nbsp;of&nbsp;both&nbsp;the&nbsp;username&nbsp;and&nbsp;password</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;fields&nbsp;and&nbsp;return&nbsp;true&nbsp;only&nbsp;if&nbsp;both&nbsp;evaluate&nbsp;to&nbsp;true</span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">var</span><span class="aname">&nbsp;usernameValue</span>&nbsp;=&nbsp;<span class="jquery">$</span>(<span class="string">'input[@name=username]'</span>).<span class="plugin">fieldValue</span>();&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">var</span><span class="aname">&nbsp;passwordValue</span>&nbsp;=&nbsp;<span class="jquery">$</span>(<span class="string">'input[@name=password]'</span>).<span class="plugin">fieldValue</span>();&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;usernameValue&nbsp;and&nbsp;passwordValue&nbsp;are&nbsp;arrays&nbsp;but&nbsp;we&nbsp;can&nbsp;do&nbsp;simple</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;"not"&nbsp;tests&nbsp;to&nbsp;see&nbsp;if&nbsp;the&nbsp;arrays&nbsp;are&nbsp;empty</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">if</span>&nbsp;(!usernameValue[<span class="numbers">0</span>]&nbsp;||&nbsp;!passwordValue[<span class="numbers">0</span>])&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class="string">'Please&nbsp;enter&nbsp;a&nbsp;value&nbsp;for&nbsp;both&nbsp;Username&nbsp;and&nbsp;Password'</span>);&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">return</span>&nbsp;<span class="keywords">false</span>;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class="string">'Both&nbsp;fields&nbsp;contain&nbsp;values.'</span>);&nbsp;<br>}</code></pre>
            <p>
            </p><h3>Note</h3>
            You can find jQuery plugins that deal specifically with field validation
            on the <a href="http://docs.jquery.com/Plugins#Forms" class="external">jQuery Plugins Page</a>.


            </div>

            <div id="sample4" class="sampleTabContent tabs-hide">
            <p>
            This page shows how to handle JSON data returned from the server.
            </p><p>
            The form below submits a message to the server and the server
            echos it back in JSON format.
            <br>
            <strong>Form markup:</strong>
            </p><pre><code class="mix"><span class="tag">&lt;form</span><span class="aname">&nbsp;id</span>=<span class="string">"jsonForm"</span><span class="aname">&nbsp;action</span>=<span class="string">"json-echo.php"</span><span class="aname">&nbsp;method</span>=<span class="string">"post"</span><span class="tag">&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;Message:&nbsp;<span class="tag">&lt;input</span><span class="aname">&nbsp;type</span>=<span class="string">"text"</span><span class="aname">&nbsp;name</span>=<span class="string">"message"</span><span class="aname">&nbsp;value</span>=<span class="string">"Hello&nbsp;JSON"</span>&nbsp;<span class="tag">/&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;input</span><span class="aname">&nbsp;type</span>=<span class="string">"submit"</span><span class="aname">&nbsp;value</span>=<span class="string">"Echo&nbsp;as&nbsp;JSON"</span>&nbsp;<span class="tag">/&gt;</span>&nbsp;<br><span class="tag">&lt;/form&gt;</span></code></pre>
            <p>
            </p><form id="jsonForm" action="json-echo.php" method="post"><div>
                Message: <input name="message" value="Hello JSON" type="text">
                <input value="Echo as JSON" type="submit">
            </div></form>
            <br>
            <strong>Server code in</strong> <code class="inline">json-echo.php</code>:
            <pre><code class="php"><span class="tag">&lt;?php</span>&nbsp;&nbsp;<span class="keyword">echo</span>&nbsp;<span class="string1">'{&nbsp;message:&nbsp;"'</span>&nbsp;.&nbsp;<span class="global">$_POST</span>[<span class="string1">'message'</span>]&nbsp;.&nbsp;<span class="string1">'"&nbsp;}'</span>;&nbsp;&nbsp;<span class="tag">?&gt;</span></code></pre>
            <strong>JavaScript:</strong>
            <pre><code class="mix"><span class="com">//&nbsp;prepare&nbsp;the&nbsp;form&nbsp;when&nbsp;the&nbsp;DOM&nbsp;is&nbsp;ready</span>&nbsp;<br><span class="jquery">$</span>(<span class="global">document</span>).ready(<span class="keywords">function</span>()&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;bind&nbsp;form&nbsp;using&nbsp;ajaxForm</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="jquery">$</span>(<span class="string">'#jsonForm'</span>).<span class="plugin">ajaxForm</span>({&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;dataType&nbsp;identifies&nbsp;the&nbsp;expected&nbsp;content&nbsp;type&nbsp;of&nbsp;the&nbsp;server&nbsp;response</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType:&nbsp;&nbsp;<span class="string">'json'</span>,&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;success&nbsp;identifies&nbsp;the&nbsp;function&nbsp;to&nbsp;invoke&nbsp;when&nbsp;the&nbsp;server&nbsp;response</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;has&nbsp;been&nbsp;received</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;&nbsp;&nbsp;processJson&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;<br>});</code></pre>

            <strong>Callback function</strong>
            <pre><code class="mix"><span class="keywords">function</span>&nbsp;processJson(data)&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;'data'&nbsp;is&nbsp;the&nbsp;json&nbsp;object&nbsp;returned&nbsp;from&nbsp;the&nbsp;server</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(data.message);&nbsp;<br>}</code></pre>
            </div>

            <div id="sample6" class="sampleTabContent tabs-hide">
            <p>
            This page shows how to handle HTML data returned from the server.
            </p><p>
            The form below submits a message to the server and the server
            echos it back in an HTML div.  The response is added to this
            page in the <code class="inline">htmlExampleTarget</code> div below.
            <br>
            <strong>Form markup:</strong>
            </p><pre><code class="mix"><span class="tag">&lt;form</span><span class="aname">&nbsp;id</span>=<span class="string">"htmlForm"</span><span class="aname">&nbsp;action</span>=<span class="string">"html-echo.php"</span><span class="aname">&nbsp;method</span>=<span class="string">"post"</span><span class="tag">&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;Message:&nbsp;<span class="tag">&lt;input</span><span class="aname">&nbsp;type</span>=<span class="string">"text"</span><span class="aname">&nbsp;name</span>=<span class="string">"message"</span><span class="aname">&nbsp;value</span>=<span class="string">"Hello&nbsp;HTML"</span>&nbsp;<span class="tag">/&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;input</span><span class="aname">&nbsp;type</span>=<span class="string">"submit"</span><span class="aname">&nbsp;value</span>=<span class="string">"Echo&nbsp;as&nbsp;HTML"</span>&nbsp;<span class="tag">/&gt;</span>&nbsp;<br><span class="tag">&lt;/form&gt;</span></code></pre>
            <p>
            </p><form id="htmlForm" action="html-echo.php" method="post"><div>
                Message: <input name="message" value="Hello HTML" type="text">
                <input value="Echo as HTML" type="submit">
            </div></form>
            <br>
            <strong>Server code in</strong> <code class="inline">html-echo.php</code>:
            <pre><code class="php"><span class="tag">&lt;?php</span>&nbsp;<br><span class="keyword">echo</span>&nbsp;<span class="string1">'&lt;div&nbsp;style="background-color:#ffa;&nbsp;padding:20px"&gt;'</span>&nbsp;.&nbsp;<span class="global">$_POST</span>[<span class="string1">'message'</span>]&nbsp;.&nbsp;<span class="string1">'&lt;/div&gt;'</span>;&nbsp;<br><span class="tag">?&gt;</span></code></pre>
            <strong>JavaScript:</strong>
            <pre><code class="mix"><span class="com">//&nbsp;prepare&nbsp;the&nbsp;form&nbsp;when&nbsp;the&nbsp;DOM&nbsp;is&nbsp;ready</span>&nbsp;<br><span class="jquery">$</span>(<span class="global">document</span>).ready(<span class="keywords">function</span>()&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;bind&nbsp;form&nbsp;using&nbsp;ajaxForm</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="jquery">$</span>(<span class="string">'#htmlForm'</span>).<span class="plugin">ajaxForm</span>({&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;target&nbsp;identifies&nbsp;the&nbsp;element(s)&nbsp;to&nbsp;update&nbsp;with&nbsp;the&nbsp;server&nbsp;response</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target:&nbsp;<span class="string">'#htmlExampleTarget'</span>,&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;success&nbsp;identifies&nbsp;the&nbsp;function&nbsp;to&nbsp;invoke&nbsp;when&nbsp;the&nbsp;server&nbsp;response</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;has&nbsp;been&nbsp;received;&nbsp;here&nbsp;we&nbsp;apply&nbsp;a&nbsp;fade-in&nbsp;effect&nbsp;to&nbsp;the&nbsp;new&nbsp;content</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;<span class="keywords">function</span>()&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="jquery">$</span>(<span class="string">'#htmlExampleTarget'</span>).fadeIn(<span class="string">'slow'</span>);&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;<br>});</code></pre>
            <h3>htmlExampleTarget (output will be added below):</h3>
            <div id="htmlExampleTarget"></div>
            </div>

            <div id="sample5" class="sampleTabContent tabs-hide">
            <p>
            This page shows how to handle XML data returned from the server.
            </p><p>
            The form below submits a message to the server and the server
            echos it back in XML format.
            <br>
            <strong>Form markup:</strong>
            </p><pre><code class="mix"><span class="tag">&lt;form</span><span class="aname">&nbsp;id</span>=<span class="string">"xmlForm"</span><span class="aname">&nbsp;action</span>=<span class="string">"xml-echo.php"</span><span class="aname">&nbsp;method</span>=<span class="string">"post"</span><span class="tag">&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;Message:&nbsp;<span class="tag">&lt;input</span><span class="aname">&nbsp;type</span>=<span class="string">"text"</span><span class="aname">&nbsp;name</span>=<span class="string">"message"</span><span class="aname">&nbsp;value</span>=<span class="string">"Hello&nbsp;XML"</span>&nbsp;<span class="tag">/&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;input</span><span class="aname">&nbsp;type</span>=<span class="string">"submit"</span><span class="aname">&nbsp;value</span>=<span class="string">"Echo&nbsp;as&nbsp;XML"</span>&nbsp;<span class="tag">/&gt;</span>&nbsp;<br><span class="tag">&lt;/form&gt;</span></code></pre>
            <p>
            </p><form id="xmlForm" action="xml-echo.php" method="post"><div>
                Message: <input name="message" value="Hello XML" type="text">
                <input value="Echo as XML" type="submit">
            </div></form>
            <br>
            <strong>Server code in</strong> <code class="inline">xml-echo.php</code>:
            <pre><code class="php"><span class="tag">&lt;?php</span>&nbsp;<br><span class="com">//&nbsp;!!!&nbsp;IMPORTANT&nbsp;!!!&nbsp;-&nbsp;the&nbsp;server&nbsp;must&nbsp;set&nbsp;the&nbsp;content&nbsp;type&nbsp;to&nbsp;XML</span>&nbsp;<br>header(<span class="string1">'Content-type:&nbsp;text/xml'</span>);&nbsp;<br><span class="keyword">echo</span>&nbsp;<span class="string1">'&lt;root&gt;&lt;message&gt;'</span>&nbsp;.&nbsp;<span class="global">$_POST</span>[<span class="string1">'message'</span>]&nbsp;.&nbsp;<span class="string1">'&lt;/message&gt;&lt;/root&gt;'</span>;&nbsp;<br><span class="tag">?&gt;</span></code></pre>
            <strong>JavaScript:</strong>
            <pre><code class="mix"><span class="com">//&nbsp;prepare&nbsp;the&nbsp;form&nbsp;when&nbsp;the&nbsp;DOM&nbsp;is&nbsp;ready</span>&nbsp;<br><span class="jquery">$</span>(<span class="global">document</span>).ready(<span class="keywords">function</span>()&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;bind&nbsp;form&nbsp;using&nbsp;ajaxForm</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="jquery">$</span>(<span class="string">'#xmlForm'</span>).<span class="plugin">ajaxForm</span>({&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;dataType&nbsp;identifies&nbsp;the&nbsp;expected&nbsp;content&nbsp;type&nbsp;of&nbsp;the&nbsp;server&nbsp;response</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType:&nbsp;&nbsp;<span class="string">'xml'</span>,&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;success&nbsp;identifies&nbsp;the&nbsp;function&nbsp;to&nbsp;invoke&nbsp;when&nbsp;the&nbsp;server&nbsp;response</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;has&nbsp;been&nbsp;received</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;&nbsp;&nbsp;processXml&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;<br>});</code></pre>

            <strong>Callback function</strong>
            <pre><code class="mix"><span class="keywords">function</span>&nbsp;processXml(responseXML)&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;'responseXML'&nbsp;is&nbsp;the&nbsp;XML&nbsp;document&nbsp;returned&nbsp;by&nbsp;the&nbsp;server;&nbsp;we&nbsp;use</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;jQuery&nbsp;to&nbsp;extract&nbsp;the&nbsp;content&nbsp;of&nbsp;the&nbsp;message&nbsp;node&nbsp;from&nbsp;the&nbsp;XML&nbsp;doc</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">var</span><span class="aname">&nbsp;message</span>&nbsp;=&nbsp;<span class="jquery">$</span>(<span class="string">'message'</span>,&nbsp;responseXML).text();&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(message);&nbsp;<br>}</code></pre>
            </div>

            <div id="sample7" class="sampleTabContent tabs-hide">
            <p>
            This page demonstrates the Form Plugin's file upload capabilities.  There is no special
            coding required to handle file uploads. File input elements are automatically
            detected and processed for you.
            </p><p>
            Since it is not possible to upload files using the browser's
            <code class="inline"><a href="http://www.w3.org/TR/XMLHttpRequest/">XMLHttpRequest</a></code>
            object, the Form Plugin uses a hidden iframe element to help with the task.  This is a
            common technique, but it has inherent limitations.  The iframe element is used as the target
            of the form's submit operation which means that the server response is written to the iframe.
            This is fine if the response type is HTML or XML<sup>[1]</sup>, but doesn't work as well if the response type is
            script or JSON, both of which often contain characters that need to be repesented using entity
            references when found in HTML markup.
            </p><p>
            To account for the challenges of script and JSON responses, the Form Plugin allows these responses
            to be embedded in a <code class="inline">textarea</code> element and it is recommended that you
            do so for these response types when used in conjuction with file uploads.  Please note, however, 
            that if a file has not been selected by the user for the file input then the request uses normal
            XHR to submit the form (not an iframe).  This puts the burden on your server code to know when
            to use a textarea and when not to.  If you like, you can use the <code class="inline">iframe</code>
            option of the plugin to force it to always use an <em>iframe mode</em> and then your server can
            always embed the response in a textarea.
            
            The following response shows how a script should be returned from the server:
            </p><pre><code class="mix"><span class="tag">&lt;textarea</span><span class="tag">&gt;</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keywords">for</span>&nbsp;(<span class="keywords">var</span><span class="aname">&nbsp;i</span>=<span class="numbers">0</span>;&nbsp;i&nbsp;&lt;&nbsp;<span class="numbers">10</span>;&nbsp;i++)&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="com">//&nbsp;do&nbsp;some&nbsp;processing</span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<br><span class="tag">&lt;/textarea&gt;</span></code></pre>
            <p>
            The form below provides an input element of type "file" along with a select element
            to specify the dataType of the response.  The form is submitted to
            <code class="inline"><a href="http://malsup.com/jquery/form/files-raw.php">files.php</a></code> which uses the dataType to
            determine what type of response to return.

            </p>
            <form id="uploadForm" action="files.php" method="post" enctype="multipart/form-data">
                <input name="MAX_FILE_SIZE" value="100000" type="hidden">
                File: <input name="file" type="file">
                Return Type: <select id="uploadResponseType" name="mimetype">
                    <option value="html">html</option>
                    <option value="json">json</option>
                    <option value="script">script</option>
                </select>
                <input value="Submit" type="submit">
            </form>

            <p>
            <label>Output:</label>
            </p><div id="uploadOutput"></div>

            <hr>
            <div>[1] <em>XML response types are not supported in Safari.</em></div>
            </div>

        </div>
    </div>

    <div id="fields" class="tabContent tabs-hide">
        <h1>Working With Fields</h1>
                This page describes and demonstrates the Form Plugin's <code class="inline">fieldValue</code> and
                <code class="inline">fieldSerialize</code> methods.
                <p>
                </p><h2>fieldValue</h2>
                <code class="inline">fieldValue</code>
                allows you to retrieve the current value of a field.  For example, to retrieve the value of the password
                field in a form with the id of 'myForm' you would write:
                <pre><code class="mix"><span class="keywords">var</span><span class="aname">&nbsp;pwd</span>&nbsp;=&nbsp;<span class="jquery">$</span>(<span class="string">'#myForm&nbsp;:password'</span>).<span class="plugin">fieldValue</span>()[<span class="numbers">0</span>];</code></pre>
                This method <strong>always</strong> returns an array.  If no valid value can be determined the
                array will be empty, otherwise it will contain one or more values.
                <p>
                </p><h2>fieldSerialize</h2>
                <code class="inline">fieldSerialize</code> allows you to serialize a subset of a form into a
                query string.  This is useful when you need to process only certain fields.  For example,
                to serialize only the text inputs of a form you would write:
                <pre><code class="mix"><span class="keywords">var</span><span class="aname">&nbsp;queryString</span>&nbsp;=&nbsp;<span class="jquery">$</span>(<span class="string">'#myForm&nbsp;:text'</span>).<span class="plugin">fieldSerialize</span>();</code></pre>

                <form id="inputForm" action="#"><div>
                    <strong>Demonstration</strong><p>
                    Enter a jQuery expression into the textbox below and then click 'Test' to see the results
                    of the <code class="inline">fieldValue</code> and <code class="inline">fieldSerialize</code>
                    methods.  These methods are run against the test form that follows.</p><p>
                    jQuery expression:
                    <input id="query" value=":text" type="text">
                    <span style="color: rgb(85, 85, 85);">(ie: textarea, [@type='hidden'], :radio, :checkbox, etc)</span>
                    <br><input id="successful" checked="checked" type="checkbox"> Successful controls only <sup>[1]</sup>
                    </p><p><input value="Test" type="submit">
                </p></div></form>
                <br>
                <form id="test" action="dummy.php" method="post"><div>
                    <strong>Test Form</strong>
                    <p>
                    </p><table>
                    <tbody><tr><td>&lt;input type="hidden" <span class="name">name="Hidden"</span> value="secret" /&gt;</td><td><input name="Hidden" value="secret" type="hidden"></td></tr>
                    <tr><td>&lt;input <span class="name">name="Name"</span> type="text" value="MyName1" /&gt;</td><td><input name="Name" value="MyName1" type="text"></td></tr>
                    <tr><td>&lt;input <span class="name">name="Password"</span> type="password" /&gt;</td><td><input name="Password" value="" type="password"></td></tr>
                    <tr><td>&lt;select <span class="name">name="Multiple"</span> multiple="multiple"&gt;</td><td><select name="Multiple" multiple="multiple">
                        <option value="one" selected="selected">One</option>
                        <option value="two">Two</option>
                        <option value="three">Three</option>
                    </select></td></tr>
                    <tr><td>&lt;select <span class="name">name="Single"</span>&gt;</td><td><select name="Single">
                        <option value="one" selected="selected">One</option>
                        <option value="two">Two</option>
                        <option value="three">Three</option>
                    </select></td></tr>
                    <tr><td>&lt;input type="checkbox" <span class="name">name="Check"</span> value="1" /&gt;</td><td><input name="Check" value="1" type="checkbox"></td></tr>
                    <tr><td>&lt;input type="checkbox" <span class="name">name="Check"</span> value="2" /&gt;</td><td><input name="Check" value="2" type="checkbox"></td></tr>
                    <tr><td>&lt;input type="checkbox" <span class="name">name="Check"</span> value="3" /&gt;</td><td><input name="Check" value="3" type="checkbox"></td></tr>
                    <tr><td>&lt;input type="checkbox" <span class="name">name="Check2"</span> value="4" /&gt;</td><td><input name="Check2" value="4" type="checkbox"></td></tr>
                    <tr><td>&lt;input type="checkbox" <span class="name">name="Check2"</span> value="5" /&gt;</td><td><input name="Check2" value="5" type="checkbox"></td></tr>
                    <tr><td>&lt;input type="checkbox" <span class="name">name="Check3"</span> /&gt;</td><td><input name="Check3" type="checkbox"></td></tr>
                    <tr><td>&lt;input type="radio" <span class="name">name="Radio"</span> value="1" /&gt;</td><td><input name="Radio" value="1" type="radio"></td></tr>
                    <tr><td>&lt;input type="radio" <span class="name">name="Radio"</span> value="2" /&gt;</td><td><input name="Radio" value="2" type="radio"></td></tr>
                    <tr><td>&lt;input type="radio" <span class="name">name="Radio"</span> value="3" /&gt;</td><td><input name="Radio" value="3" type="radio"></td></tr>
                    <tr><td>&lt;input type="radio" <span class="name">name="Radio2"</span> value="4" /&gt;</td><td><input name="Radio2" value="4" type="radio"></td></tr>
                    <tr><td>&lt;input type="radio" <span class="name">name="Radio2"</span> value="5" /&gt;</td><td><input name="Radio2" value="5" type="radio"></td></tr>
                    <tr><td>&lt;textarea <span class="name">name="Text"</span> rows="2" cols="20"&gt;&lt;/textarea&gt;</td><td><textarea name="Text" rows="2" cols="20"></textarea></td></tr>
                    <tr><td>&lt;input type="reset" <span class="name">name="resetButton"</span> value="Reset" /&gt;</td><td><input name="resetButton" value="Reset" type="reset"></td></tr>
                    <tr><td>&lt;input type="submit" <span class="name">name="sub"</span> value="Submit" /&gt;</td><td><input name="submitButton" value="Submit" type="submit"></td></tr>
                    </tbody></table>
                </div></form>
                <p>
                [1] <a class="external" href="http://www.w3.org/TR/html4/interact/forms.html#successful-controls">http://www.w3.org/TR/html4/interact/forms.html#successful-controls</a>.
                </p><p>By default, <code class="inline">fieldValue</code> and <code class="inline">fieldSerialize</code>
only function on 'successful controls'. This means that if you run the
following code on a checkbox that is not checked, the result will be an
empty array. </p><pre><code class="mix"><span class="com">//&nbsp;value&nbsp;will&nbsp;be&nbsp;an&nbsp;empty&nbsp;array&nbsp;if&nbsp;checkbox&nbsp;is&nbsp;not&nbsp;checked:</span>&nbsp;<br><span class="keywords">var</span><span class="aname">&nbsp;value</span>&nbsp;=&nbsp;<span class="jquery">$</span>(<span class="string">'#myUncheckedCheckbox'</span>).<span class="plugin">fieldValue</span>();&nbsp;<br><span class="com">//&nbsp;value.length&nbsp;==&nbsp;0</span>&nbsp;<br></code></pre>
                However, if you really want to know the 'value' of the checkbox element, even if it's unchecked, you can
                write this:
                <pre><code class="mix"><span class="com">//&nbsp;value&nbsp;will&nbsp;hold&nbsp;the&nbsp;checkbox&nbsp;value&nbsp;even&nbsp;if&nbsp;it's&nbsp;not&nbsp;checked:</span>&nbsp;<br><span class="keywords">var</span><span class="aname">&nbsp;value</span>&nbsp;=&nbsp;<span class="jquery">$</span>(<span class="string">'#myUncheckedCheckbox'</span>).<span class="plugin">fieldValue</span>(<span class="keywords">false</span>);&nbsp;<br><span class="com">//&nbsp;value.length&nbsp;==&nbsp;1</span>&nbsp;<br></code></pre>
    </div>

    <div id="faq" class="tabContent tabs-hide">
        <h1>Frequently Asked Questions</h1>
        <dl>
        <dt>What versions of jQuery is the Form Plugin compatible with?</dt>
        <dd>The Form Plugin is compatible with jQuery v1.0.3 and later.</dd>
        <dt>Does the Form Plugin have any dependencies on other plugins?</dt>
        <dd>No.</dd>
        <dt>Is the Form Plugin fast?</dt>
        <dd>Yes!  See our <a href="http://malsup.com/jquery/form/comp/">comparison page</a> for a look at how the Form Plugin compares to other libraries (including Prototype and dojo).</dd>
        <dt>What is the easiet way to use the Form Plugin?</dt>
        <dd><code class="inline">ajaxForm</code> provides the simplest way to enable your HTML form to use AJAX.  It's the one-stop-shopping
           method for preparing forms.</dd>
        <dt>What is the difference between <code class="inline">ajaxForm</code> and <code class="inline">ajaxSubmit</code>?</dt>
        <dd>There are two main differences between these methods:
            <ol>
                <li><code class="inline">ajaxSubmit</code> submits the form, <code class="inline">ajaxForm</code> does not.  When you invoke <code class="inline">ajaxSubmit</code>
                    it immediately serializes the
                    form data and sends it to the server.  When you invoke <code class="inline">ajaxForm</code> it adds the necessary event listeners to the form
                    so that it can detect when the form is submitted by the user.  When this occurs <code class="inline">ajaxSubmit</code> is called for you.
                </li>
                <li>When using <code class="inline">ajaxForm</code> the submitted data will include the name and value of the submitting element (or its click coordinates if the
                    submitting element is an image).</li>
            </ol>
        </dd>
        <dt>How can I cancel a form submit?</dt>
        <dd>You can prevent a form from being submitted by adding a 'beforeSubmit' callback
            function and returning false from that function.  See the Code Samples page
            for an example.</dd>
        <dt>Is there a unit test suite for the Form Plugin?</dt>
        <dd>Yes!  The Form Plugin has an extensive set of tests that are used to validate its functionality.
        <a href="http://malsup.com/jquery/form/test/">Run unit tests.</a>
        </dd>
        <dt>Does the Form Plugin support file uploads?</dt>
        <dd>Yes!</dd>
        </dl>
    </div>

    <div id="download" class="tabContent tabs-hide">
        <h1>Download</h1>
        The Official Form Plugin is available in the jQuery Subversion repository:
        <a class="external" href="http://jqueryjs.googlecode.com/svn/trunk/plugins/form/jquery.form.js">http://jqueryjs.googlecode.com/svn/trunk/plugins/form/jquery.form.js</a>.
        <p>
        There are many other useful <a class="external" href="http://docs.jquery.com/Plugins#Forms">Form Plugins</a>
        available from the <a class="external" href="http://docs.jquery.com/Plugins">jQuery Plugins</a> page.
        </p><p>
        </p><h1>Support</h1>
        Support for the Form Plugin is available through the
        <a class="external" href="http://jquery.com/discuss/">jQuery Mailing List</a>.  This is a very active list
        to which many jQuery developers and users subscribe.
        <p>
        Access to the jQuery Mailing List is also
        available through the <a class="external" href="http://www.nabble.com/JQuery-f15494.html">Nabble Forums</a>.
        </p><p>
        </p><h1>Contributors</h1>
        Development of the Form Plugin was a community effort with many people contributing ideas and code.
        The following people have made contributions of one kind or another:
        <ul>
            <li>John Resig</li>
            <li>Mike Alsup</li>
            <li>Mark Constable</li>
            <li>Klaus Hartl</li>
            <li>Matt Grimm</li>
            <li>Yehuda Katz</li>
            <li>Jörn Zaefferer</li>
            <li>Sam Collett</li>
            <li>Gilles van den Hoven</li>
            <li>Kevin Glowacz</li>
        </ul>
        <em>Send me an email if I've forgotten someone.</em>
        <div id="footer">
        This site is maintained by Mike Alsup.  Send comments or questions to jquery at malsup dot com.
        </div>
    </div>
<div style="display: none;" id="busy">Loading...</div></div> <!-- main -->
<script src="jQuery%20Form%20Plugin_files/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-850242-2";
urchinTracker();
</script>
</body></html>